client-list-item {
    width: 100%;
    height:auto;
    display:block;

    .search-wrapper {
        width: 100%;
        top: 13.889vw;
        height: 20.09vw;
        padding-bottom:3.06vw;
        background-color: #f5f5f5;
        display: flex;
        align-items: flex-end;
        overflow:hidden;
        .search-key-wrapper {
            background: linear-gradient(to right, #63b24c, #018c6e);
            border: none;
            border-radius: 6vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 88.89vw;
            height: 11.57vw;
            margin: 0 auto;
            box-shadow:0 1vw 2vw 0 #ddd;
            i {
                width: 4.5vw;
                height: 4.5vw;
                margin: auto 4.17vw auto 2vw;
                background-image: url(../assets/images/client/client-list/icon_search.png);
                background-size: cover;
                background-repeat: no-repeat;
            }
            input {
                width:74vw;
                height: 7vw;
                margin-left:4.17vw;
                background: none;
                border: none;
                font-size: 3.89vw;
                margin-right: 0;
                color: #fff;
                &::placeholder {
                    color: rgba(255, 255, 255, 0.5);
                }
            }
        }

    }




    .client-item {
        width: 100%;
        height:auto;
        background-color: #F5F5F5;
        overflow:hidden;

        .item-inner {
            border: none !important;
            padding: 0 !important;
            .input-wrapper {
                height: auto;
            }
        }

        .client-item-inner {
            width: 93%;
            margin: 2.5vw auto 3.06vw auto;
            box-shadow:0 0 4.6vw 0.001vw rgba(0,0,0,0.1);
            background-color:#ffffff;
            height: 33.34vw;
            display: flex;
            position: relative;
            padding: 4.17vw 7.4vw !important;

            .client-head {
                width: 13.89vw;
                height: 17.78vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 4.8vw;
                .age {
                    font-size: 3.733vw;
                }

                & > div {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;

                    &.name {
                        width: 85%;
                        text-align: center;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .l-message {
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    background: none;
                    display: block;

                    i {
                        width: 100%;
                        height: 100%;
                        background-image: url('../assets/images/client/client-vip/icon_unknown.png');
                        background-repeat: no-repeat;
                        background-size: cover;
                        display: block;
                    }
                    i.male {
                        background-image: url('../assets/images/client/client-vip/icon_man.png');
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                    i.female {
                        background-image: url('../assets/images/client/client-vip/icon_woman.png');
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                }

            }

            .vip-flag-wrapper {
                width: 7.13vw;
                height: 100%;

                //i {
                //    display: block;
                //    width: 5.3vw;
                //    height: 5.3vw;
                //    background-size: cover;
                //    float: right;
                //
                //    &.gold {
                //        background-image: url('../assets/images/client/client-list/icon_vip_gold.png');
                //    }
                //    &.platinum {
                //        background-image: url('../assets/images/client/client-list/icon_vip_platinum.png');
                //    }
                //    &.diamond {
                //        background-image: url('../assets/images/client/client-list/icon_vip_diamond.png');
                //    }
                //    &.supreme {
                //        background-image: url('../assets/images/client/client-list/icon_vip_supreme.png');
                //    }
                //}
            }
            .client-vip-flag{
                width: 22vw;
                height: 5vw;
                background-size:contain;
                background-repeat:no-repeat;
                position:absolute;
                bottom:3.7vw;
                left:4.17vw;
                &.gold{
                    background-image:url("../assets/images/clients/icon_vip_gold.png");
                }
                &.platinum{
                    background-image:url("../assets/images/clients/icon_vip_platinum.png");
                }
                &.diamond{
                    background-image:url("../assets/images/clients/icon_vip_diamond.png");
                }
                &.supreme{
                    background-image:url("../assets/images/clients/icon_vip_supreme.png");
                }
            }
            .fun-wrapper {
                position: absolute;
                right: 4.16vw;
                bottom: 4.3vw;
                width: auto;
                height: 7.4vw;
                display: flex;
                justify-content: flex-end;

                button {
                    height: 100%;
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    border-radius: 4vw;
                    font-size: 3.3vw;

                    &.view-details {
                        background: #005d99;
                    }
                    &.call {
                        width:18.24vw;
                        height:7.4vw;
                        margin-left: 1.85vw;
                        background: #2db566;
                        &[disabled] {
                            background: #bcbec1;
                        }
                    }
                    &.renewal-details{
                        width:23.61vw;
                        height:7.41vw;
                        background-color:#018c6e;
                    }
                }
            }
            .client-remark {
                width: auto;
                height: 100%;
                margin: auto 0;
                font-size: 3.733vw;
                color: #333333;
                .title-row{
                    width:auto;
                    height:auto;
                    display:flex;
                    align-items: center;
                    margin-bottom:2vw;
                    .age{
                        font-size:3.33vw;
                        margin-left:2vw;
                        color:#999999;
                    }
                }
                span.v {
                    color: #333;
                }
                div.item {
                    width: auto;
                   // height: 5vw;
                    line-height: 5vw;
                    font-size: 3.33vw;
                    margin-bottom:0.5vw;
                }
                div.item.name {
                    max-width: 41vw;
                    font-size: 4.17vw;
                    &.is-death {
                        border: 1px solid #000;
                        padding:0.5vw 0.5vw 0.1vw 0.5vw;
                        height: auto;
                    }
                }
                div.birth-row {
                    position:absolute;
                    bottom: 4.3vw;
                    left: 28.7vw;
                    color: #35ac63;
                    display:flex;
                    align-items: center;

                    .gift{
                        width:3.89vw;
                        height:3.89vw;
                        display:inline-block;
                        background:url("../assets/images/client/client-list/icon_gift.png") no-repeat;
                        background-size:contain;
                        margin-right:1.67vw;
                    }
                }
            }
            .i-p-wrapper{
                top:4.17vw;
                right:4.17vw;
                position:absolute;
                display:flex;
                justify-content: flex-end;
                width:11vw;
                span{
                    display:block;
                    width:4.54vw;
                    height:4.54vw;
                    background-size:contain;
                    background-repeat:no-repeat;
                    &.i-icon{
                        background-image:url('../assets/images/clients/icon_Policyholder.png');
                    }
                    &.po-icon{
                        margin-left:1.39vw;
                        background-image:url('../assets/images/clients/icon_Insured.png');
                    }
                }
            }
        }

    }
}
